<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>汇客CRM管理系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="huike/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="huike/styles/transition.css" />
    <link rel="stylesheet" href="huike/styles/element-ui.css" />
    <link rel="stylesheet" href="huike/styles/sidebar.css" />
    <link rel="stylesheet" href="huike/styles/common.css" />
    <link rel="stylesheet" href="huike/styles/index.css" />
    <link rel="stylesheet" href="huike/styles/page.css" />
    <link rel="stylesheet" href="huike/styles/iconfont/iconfont.css" />
    <style>
      .body{
        min-width: 1366px;
      }
      .app-main{
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
      }
      .fixed-header+.app-main {
        padding-top: 66px;
      }
      .c_iframe {
        width: 100%;
        height: 100%;
        border: 0;
        overflow: hidden;
      }
      .hide {
        display: hide;
      }
      .app-main .divTmp{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="app" id="app">
      <div class="app-wrapper clearfix" :class="[isCollapse?'hideSidebar':'openSidebar']">
        <!-- sidebar -->
        <div class="sidebar-container" :class="{'has-logo':showLogo,'hide-sidebar':isCollapse}" style="background: #2B303B;">
          <!-- logo -->
          <div class="sidebar-logo-container" :class="{'collapse':isCollapse}" style="background: #2B303B;">
            <transition name="sidebarLogoFade">
              <div v-if="isCollapse" key="isCollapse" class="sidebar-logo-link">
                <img v-if="logoMini" :src="logoMini" class="sidebar-logo logo-mini">
                <h1 v-else class="sidebar-title" style="color: #ffffff;">{{ title }} </h1>
              </div>
              <div v-else key="expand" class="sidebar-logo-link">
                <img v-if="logo" :src="logo" class="sidebar-logo">
                <h1 class="sidebar-title" style="color: #ffffff;">{{ title }} </h1>
              </div>
            </transition>
          </div>
          <!-- 菜单 -->
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
              :default-active="activeMenu"
              :collapse="isCollapse"
              background-color="#2B303B"
              text-color="#aeb5c4"
              :unique-opened="true"
              active-text-color="#05CC95"
              :collapse-transition="false"
              mode="vertical"
            >
              <div v-for="item in menuList" :key="item.id">
                <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                  <template slot="title">
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item
                    v-for="sub in item.children"
                    :index="sub.id"
                    :key="sub.id"
                    @click="menuHandle(sub,false)"
                    >
                    <i :class="iconfont" :class="sub.icon"></i>
                    <span slot="title">{{sub.name}}</span>
                    </el-menu-item
                  >
                </el-submenu>
                <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                  <i class="iconfont" :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </div>
            </el-menu>
          </el-scrollbar>
          <!-- 退出 -->
          <div class="exit-box" :class="{'collapse':isCollapse}">
            <transition name="exitFade">
              <div class="exit-con">
                <div class="user-avatar-box">
                  <img src="/huike/images/profile.jpg" class="user-avatar">
                </div>
                <div class="user-name ellipsis">{{ userInfo.userName }}</div>
                <img src="huike/images/exit.png" alt="" class="user-exit" @click="logout">
              </div>
            </transition>
          </div>
        </div>
        <div class="main-container">
          <div class="fixed-header">
            <div class="navbar">
              <div id="hamburger-container" class="hamburger-container" style="padding: 0 15px;" @click="toggleClick">
                <svg
                  :class="{'is-active':!isCollapse}"
                  class="hamburger"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  width="64"
                  height="64"
                >
                  <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
                </svg>
              </div>
              <div class="el-breadcrumb app-breadcrumb breadcrumb-container">
                <span class="no-redirect current-bread">{{headTitle}}</span>
              </div>
            </div>
          </div>
          <div class="app-main" v-loading="loading">
            <div class="divTmp" v-show="loading"></div>
            <iframe
              id="cIframe"
              class="c_iframe"
              name="cIframe"
              :src="iframeUrl"
              width="100%"
              height="auto"
              frameborder="0"
              v-show="!loading"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="huike/plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="huike/plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="huike/plugins/axios/axios.min.js"></script>
    <script src="huike/js/request.js"></script>
    <script src="huike/api/login.js"></script>
    <script>

      new Vue({
        el: '#app',
        data() {
          return {
            activeMenu: '1',
            menuActived: '1',
            isCollapse: false,
            showLogo: true,
            title: '汇客CRM系统',
            logo: 'huike/images/logo/logo.png',
            logoMini: 'huike/images/logo/logo-mini.png',
            levelList: [],
            userInfo: {},
            menuList: [
              {
                id: '1',
                name: '课程管理',
                url: 'huike/page/course/list.html',
                icon: 'iconicon_menu_kcgl'
              },
              {
                id: '2',
                name: '活动管理',
                url: 'huike/page/activity/list.html',
                icon: 'iconicon_menu_hdgl'
              }
            ],
            iframeUrl: 'huike/page/course/list.html',
            headTitle: '课程管理',
            goBackFlag: false,
            loading: true,
            timer: null
          }
        },
        computed: {},
        created() {
          this.getUserInfo()
          this.closeLoading()
        },
        beforeDestroy() {
          this.timer = null
          clearTimeout(this.timer)
        },
        mounted() {
          window.menuHandle = this.menuHandle
        },
        methods: {
          async getUserInfo(){
            let res = await getInfo()
            this.userInfo = res?.user
          },
          logout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              logout().then((res)=>{
                localStorage.removeItem('Admin-Token')
                window.location.href = '/huike/page/login/login.html'
              })
            })
          },
          goBack() {
            // window.location.href = 'javascript:history.go(-1)'
            const menu = this.menuList.find(item=>item.id===this.menuActived)
            // this.goBackFlag = false
            // this.headTitle = menu.name
            this.menuHandle(menu,false)
          },
          menuHandle(item, goBackFlag) {
            this.loading = true
            this.menuActived = item.id
            this.iframeUrl = item.url
            this.headTitle = item.name
            this.goBackFlag = goBackFlag
            this.closeLoading()
          },
          closeLoading(){
            this.timer = null
            this.timer = setTimeout(()=>{
              this.loading = false
            },1000)
          },
          toggleClick(){
            this.isCollapse = !this.isCollapse
          }
        }
      })
    </script>
  </body>
</html>
